<template>
<!--  校团委  -->
    <div>
        <div style="overflow: hidden;margin-bottom: 20px">
            <el-button type="primary" style="float: right" @click="add">添加新活动</el-button>
        </div>
        <el-card class="box-card" v-for="(item, index) in list" :key="index" style="margin-bottom: 30px">
            <div style="display: flex;justify-content: space-between;align-items: center">
                <h4>{{item.title}}</h4>
                <div>
                    <el-button type="text" @click="xiugiao(item.activity_id,item.people,item.title,item.content,item.type,item.sign_up_end_time,item.end_time,item.note,item.professional)">修改</el-button>
                    <el-button type="text" @click="shanchu(item.activity_id,index)" style="margin-left: 20px;color: red">删除</el-button>
                </div>
            </div>
            <div style="margin-top: 10px">{{item.content}}</div>
            <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-size: 13px">
                    <div style="margin-top: 10px">限{{item.people}}参加</div>
                    <div style="margin-top: 10px">类型：{{item.type}}</div>
                </div>
                <div style="font-size: 13px">
                    <div style="margin-top: 10px">报名结束时间：{{item.sign_up_end_time}}</div>
                    <div style="margin-top: 10px">活动结束时间：{{item.end_time}}</div>
                </div>
            </div>
            <div style="display: flex;justify-content: space-between;align-items: center">
                <div style="font-size: 12px;margin-top: 10px">专业：{{item.professional}}</div>
                <div style="font-size: 12px;margin-top: 10px">备注：{{item.note}}</div>
            </div>
        </el-card>
        <div style="text-align: center;margin-top: 20px;cursor: pointer" @click="more" v-show="ismore">加载更多</div>
<!--        修改框-->
        <el-drawer
                title="修改活动"
                :visible.sync="drawer"
                :direction="direction"
        >
            <div>

                    <div style="margin-bottom: 10px;font-size: 13px">活动标题：</div>
                    <el-input
                            placeholder="请输入活动标题"
                            prefix-icon="el-icon-collection-tag"
                            v-model="title"
                            style="margin-bottom: 20px"
                    ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">活动内容：</div>
                <el-input
                        placeholder="请输入活动内容"
                        prefix-icon="el-icon-document"
                        v-model="content"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">活动类型：</div>
                <el-input
                        placeholder="请输入活动类型"
                        prefix-icon="el-icon-more-outline"
                        v-model="type"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">限制人数：</div>
                <el-input
                        placeholder="请输入限制人数"
                        prefix-icon="el-icon-user"
                        v-model="people"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">适合人的专业：</div>
                <el-input
                        placeholder="请输入适合人的专业"
                        prefix-icon="el-icon-postcard"
                        v-model="professional"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">报名结束时间：</div>
                <el-input
                        placeholder="请输入报名结束时间"
                        prefix-icon="el-icon-timer"
                        v-model="sign_up_end_time"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">活动开始时间：</div>
                <el-input
                        placeholder="请输入活动开始时间"
                        prefix-icon="el-icon-alarm-clock"
                        v-model="end_time"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">备注：</div>
                <el-input
                        placeholder="请输入备注"
                        prefix-icon="el-icon-chat-line-round"
                        v-model="note"
                        style="margin-bottom: 20px"
                ></el-input>
                <el-button type="primary" @click="queding">确定</el-button>
            </div>
        </el-drawer>
<!--        添加框-->
        <el-drawer
                title="修改活动"
                :visible.sync="drawers"
                :direction="directions"
        >
            <div>

                <div style="margin-bottom: 10px;font-size: 13px">活动标题：</div>
                <el-input
                        placeholder="请输入活动标题"
                        prefix-icon="el-icon-collection-tag"
                        v-model="titles"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">活动内容：</div>
                <el-input
                        placeholder="请输入活动内容"
                        prefix-icon="el-icon-document"
                        v-model="contents"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">活动类型：</div>
                <el-input
                        placeholder="请输入活动类型"
                        prefix-icon="el-icon-more-outline"
                        v-model="types"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">限制人数：</div>
                <el-input
                        placeholder="请输入限制人数"
                        prefix-icon="el-icon-user"
                        v-model="peoples"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">适合人的专业：</div>
                <el-input
                        placeholder="请输入适合人的专业"
                        prefix-icon="el-icon-postcard"
                        v-model="professionals"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">报名结束时间：</div>
                <el-input
                        placeholder="请输入报名结束时间"
                        prefix-icon="el-icon-timer"
                        v-model="sign_up_end_times"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">活动开始时间：</div>
                <el-input
                        placeholder="请输入活动开始时间"
                        prefix-icon="el-icon-alarm-clock"
                        v-model="end_times"
                        style="margin-bottom: 20px"
                ></el-input>
                <div style="margin-bottom: 10px;font-size: 13px">备注：</div>
                <el-input
                        placeholder="请输入备注"
                        prefix-icon="el-icon-chat-line-round"
                        v-model="notes"
                        style="margin-bottom: 20px"
                ></el-input>
                <el-button type="primary" @click="add1">确定</el-button>
            </div>
        </el-drawer>
    </div>
</template>

<script>
    import {getallactivity, changeactivity, deleteactivity, addactivity} from '../api/api'
    export default {
        name: "school",
        data(){
            return{
                list:[],
                n:1,
                ismore:true,
                drawer:false,
                direction:'rtl',
                title:'',
                people:0,
                content:'',
                type:'',
                sign_up_end_time:'',
                end_time:'',
                note:'',
                professional:'',
                activity_id:0,
                drawers:false,
                directions:'rtl',
                titles:'',
                contents:'',
                types:'',
                peoples:0,
                professionals:'',
                sign_up_end_times:'',
                end_times:'',
                notes:''
            }
        },
        methods:{
            add(){
                this.drawers = true
            },
            add1(){
                addactivity(this.peoples, this.titles, this.contents, this.professionals, this.types, this.sign_up_end_times, this.end_times, this.notes).then(res=>{
                    // console.log(res)
                    if(res.status == 0){
                        this.drawers = false
                        this.$message({
                            showClose: true,
                            message: '新增成功',
                            type: 'success'
                        });
                        this.$router.go(0)
                    }
                })
            },
            shanchu(activity_id,index){
                deleteactivity(activity_id).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        this.list.splice(index,1)
                    }
                })
            },
            xiugiao(activity_id, people, title, content, type, sign_up_end_time, end_time, note, professional){
                this.activity_id = activity_id
                this.people = people
                this.title = title
                this.content = content
                this.type = type
                this.sign_up_end_time = sign_up_end_time
                this.end_time = end_time
                this.note = note
                this.professional = professional
                this.drawer = true
            },
            queding(){
                changeactivity(this.activity_id, this.people, this.title, this.content, this.type, this.sign_up_end_time, this.end_time, this.note, this.professional).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        this.drawer = false
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.$router.go(0)
                    }
                })

            },
            get(n){
                getallactivity(n).then(res=>{
                    console.log(res)
                    if(res.status == 0){
                        if(res.data.length == 0){
                            this.ismore = false
                        }
                        this.list = this.list.concat(res.data)
                    }
                })
            },
            more(){
                this.n++
                this.get(this.n)
            }
        },
        created() {
            this.get(this.n)
        }
    }
</script>

<style scoped>
    /deep/.el-drawer__body {
        padding: 20px;
        margin-bottom: 20px;
    }
</style>
